<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" style="margin-bottom: 16px;">
      <el-form-item label="载体">
        <el-select
          v-model="queryParams.zt"
          placeholder="请选择载体"
          style="width: 200px"
          @change="handleQuery"
        >
          <el-option
            v-for="item in carrierList"
            :key="item.nr"
            :label="item.nr"
            :value="item.nr"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="楼层">
        <el-input
          v-model="queryParams.lc"
          placeholder="请输入楼层"
          style="width: 120px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="月份">
        <el-date-picker
          v-model="queryParams.month"
          type="month"
          value-format="YYYY-MM"
          placeholder="请选择月份"
          style="width: 140px"
          @change="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据看板卡片 -->
    <el-card class="energy-board-card" shadow="hover">
      <div class="energy-board-header">
        <span style="margin-right: 16px; color: #888;font-size: 20px;">区域用电量统计</span>

        <span class="zt-highlight">
          {{ queryParams.zt }}
        </span>
        <span v-if="queryParams.lc" class="lc-highlight">
          {{ queryParams.lc }}楼
        </span>
      </div>
      <div class="energy-board-row">
        <div class="energy-board-item board-blue">
          <div class="label">区域总电量</div>
          <div class="value">{{ boardData['载体总电量'] ?? '--' }}</div>
        </div>
        <div class="energy-board-item board-green">
          <div class="label">租户总电量</div>
          <div class="value">{{ boardData['租户总电量'] ?? '--' }}</div>
        </div>
        <div class="energy-board-item board-orange">
          <div class="label">自用总电量</div>
          <div class="value">{{ boardData['自用总电量'] ?? '--' }}</div>
        </div>
        <div class="energy-board-item board-purple">
          <div class="label">公共总电量</div>
          <div class="value">{{ boardData['公共总电量'] ?? '--' }}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { selectCarrierElectricity } from "@/api/carrier/index";
import { selectzt } from "@/api/carrier/ammeter";

// 查询参数
const queryParams = reactive({
  zt: undefined,
  lc: "",
  month: getLastMonthStr(),
 
});
const carrierList = ref([]);  
const loading = ref(false);
const boardData = ref({});

import { parseTime } from "@/utils/ruoyi";

function getLastMonthStr() {
  const d = new Date();
  d.setDate(1); // 设置为当月第一天
  d.setMonth(d.getMonth() - 1);

  console.log(parseTime(d, "{y}-{m}"),parseTime(d),d.getMonth());
  return parseTime(d, "{y}-{m}");
}

// 获取载体下拉
function getCarrierList() {
  selectzt({
    pageNum: 1,
    pageSize: 20,
    lxbh: 1,
  }).then(res => {
    carrierList.value = res.data?.list || [];
    if (carrierList.value.length > 0) {
      queryParams.zt = carrierList.value[0].nr;
      handleQuery();
    }
  });
}

// 查询用电量列表和数据看板
function getList() {
  loading.value = true;
  selectCarrierElectricity({
    zt: queryParams.zt,
    lc: queryParams.lc,
    month: queryParams.month,
    pageNum: queryParams.pageNum,
    pageSize: queryParams.pageSize,
  }).then(res => { 
    // 数据看板
    boardData.value = res.data|| {};
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  });
}

function handleQuery() { 
  getList();
}
function resetQuery() {
  queryParams.lc = "";
  queryParams.month = getLastMonthStr(); 
  if (carrierList.value.length > 0) {
    queryParams.zt = carrierList.value[0].nr;
  }
  getList();
} 


onMounted(() => {
  getCarrierList();
});
</script>

<style scoped>
.energy-board-card {
  margin-bottom: 18px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(32,159,240,0.08);
  padding: 22px 28px 18px 28px;
}
.energy-board-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 18px;
  color: #222;
  display: flex;
  align-items: center;
}
.zt-highlight {
  color: #209ff0;
  font-size: 20px;
  font-weight: bold;
  margin-right: 8px;
}
.lc-highlight {
  color: #faad14;
  font-size: 16px;
  margin-left: 2px;
  font-weight: bold;
}
.energy-board-row {
  display: flex;
  gap: 18px;
}
.energy-board-item {
  flex: 1;
  background: linear-gradient(135deg, #fafdff 0%, #eaf6ff 100%);
  border-radius: 10px;
  padding: 18px 0 12px 0;
  text-align: center;
  box-shadow: 0 2px 8px rgba(32,159,240,0.06);
  border: 1.5px solid #e6f3fc;
  transition: box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.energy-board-item .label {
  font-size: 15px;
  color: #7a8fa7;
  margin-bottom: 8px;
  font-weight: 500;
}
.energy-board-item .value {
  font-size: 28px;
  font-weight: bold;
  color: #222;
  letter-spacing: 1px;
  line-height: 1.2;
}
.board-blue {
  border-left: 5px solid #209ff0;
}
.board-green {
  border-left: 5px solid #67c23a;
}
.board-orange {
  border-left: 5px solid #faad14;
}
.board-purple {
  border-left: 5px solid #b37feb;
}
</style>